<template>
	<view style="display: flex;flex-direction: column; align-items: center;">
		<!-- 用户信息区域 -->
		<view style="background-color: #3187FB;width: 750rpx; height: 150rpx; display: flex;justify-content: space-between; align-items: center;">
			<view style="display: flex; align-items: center;">
				<!-- 头像 -->
				<image
					mode="aspectFill"
					:src="userInfo.avatar"
					style="width: 110rpx;height: 110rpx;margin-left: 24rpx;border-radius: 50%;"
					@click="preview(userInfo.avatar)"
				></image>
				<!-- 昵称账号 -->
				<view style="display: flex;flex-direction: column;margin-left: 29rpx;">
					<view style="font-size: 30rpx;color: #FFFFFF;">{{ userInfo.user_nickname }}</view>
					<view style="font-size: 24rpx;color: #FFFFFF;">账号： {{ userInfo.user_invitestr }}</view>
				</view>
			</view>

			<!-- <view style="margin-right: 24rpx;">
				>
			</view> -->
		</view>

		<!-- 余额、累计返利、我的卡券 -->
		<view style="display: flex;justify-content: space-between;width: 600rpx;margin-top: 39rpx;" >
			<view @click="gotoPage('qianbaoyue')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view style="font-size: 32rpx;color: #F07203;">￥{{ userindex.balance }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">钱包余额</view>
			</view>
			<view @click="gotoPage('rebate')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view style="font-size: 32rpx;color: #F07203;">￥{{ userindex.rebate }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">累计返利</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="gotoPage('youhuiquan')">
				<view style="font-size: 32rpx;color: #F07203;">{{ userindex.coupon }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">我的卡券</view>
			</view>
		</view>

		<!-- 分割线 -->
		<view style="width: 100%;height: 20rpx;margin-top: 39rpx;background-color: #F7F8FF;"></view>

		<!-- 入口列表 -->
		<!-- 我的预约 -->
	<!-- 	<view @click="ctctCustServ" style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../../static/kefu.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">联系客服</view>
			</view>
			<view>></view>
		</view> -->
		<!-- <view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view> -->
		<view @click="gotoPage('wodeyuyue')" style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;" >
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../../static/me/wodeyuyue.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">我的预约</view>
			</view>
			<view>></view>
		</view>
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;" ></view>

		<!-- 我的好友 -->
		<view @click="gotoPage('wodehaoyou')" style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../../static/me/wodetuandui.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">我的好友</view>
			</view>
			<view>></view>
		</view>
		<!-- 分割线 -->
		<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>

		<!-- 邀请好友 -->
		<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx; position: relative;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../../static/me/yaoqinghaoyou.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">邀请好友</view>
			</view>
			<view>></view>
			<button open-type="share" class="btnsave"></button>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 20rpx;margin-top: 39rpx;background-color: #F7F8FF;"></view>

		<!-- 总部 -->

		<view v-if="userInfo.is_zb == 1">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;" @click="gotoPage('zongbu')">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/zongxiao.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">总部</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>

		<!-- 总校管理  -->
		<view v-if="userInfo.user_identity == 4">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;" @click="gotoPage('zongxiao')">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/zongxiao.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">总队管理</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>

		<block v-if="userInfo.user_identity == 4">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;" @click="gotoPage('totSales')">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/xiaoshou.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">教练销售管理</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</block>

		<!-- 分校管理 -->
		<view @click="gotoPage('fenxiao')" v-if="userInfo.user_identity == 3">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/fenxiao.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">分校管理</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>

		<!-- 教练销售管理 -->
		<view @click="gotoPage('xiaoshou')" v-if="userInfo.user_identity == 2">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/xiaoshou.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">教练销售管理</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>

		<!-- 公共邀请池 -->
		<view v-if="userInfo.user_identity == 1 || userInfo.user_identity == 3 || userInfo.is_zb == 1" @click="jump">
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/gonggongchi.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">公共邀请池</view>
				</view>
				<view>></view>
			</view>
			<!-- 分割线 -->
			<view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view>
		</view>
		<u-popup v-model="show1" mode="bottom" border-radius="14" height="250rpx">
			<view class="ddd"><button class="cu-btn" open-type="getPhoneNumber" @getphonenumber="getMobileNum">获取手机号码</button></view>
		</u-popup>
		<u-popup v-model="showMobileNum" mode="center" border-radius="14">
			<view style="width: 80vw; padding: 30rpx; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;" @click="dialNum">
				<view class="">
					<u-icon name="phone-fill" color="#2979ff" style="margin-left: 10rpx;"></u-icon>
					客服电话:
				</view>
				<text style="margin-top: 20rpx;">{{ dd ? dd : '暂无电话' }}</text>
			</view>
		</u-popup>
		<!-- 设置 -->
		<!-- <view>
			<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../static/me/shezhi.png" style="width: 32rpx;height: 32rpx;"></image>
					<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">设置</view>
				</view>
				<view>></view>
			</view>
		</view> -->
	</view>
</template>

<script>
import helper from '../../common/helper.js';
export default {
	data() {
		return {
			dd: '',
			showMobileNum: false,
			show1: false,
			userInfo: {
				user_nickname: '用户', //昵称
				user_invitestr: '', //邀请人
				user_identity: '', //身份	0普通用户 ； 1客服账户 ； 2教练销售 ；3分校 ； 4总校
				mobile: '', //手机号
				id: '', //id
				balance: '0.00', //余额
				avatar: '', //头像
			},
			userindex: {},
			
			showmol:false
		};
	},
	onShow() {
		let that = this;
		var info = uni.getStorageSync('infoo');
		//判断是否是登陆状态
		uni.getStorage({
			key: 'token',
			success(res) {
				console.log('token***************', res);
				if (info.mobile) {
					this.show1 = false;
				} else {
					this.show1 = true;
				}
			},
			fail() {
				console.log('token------------- res');
				that.$Router.push({
					name: 'login',
				});
			},
		});

		//获取用户信息
		this.getUserInfo();
		this.userIndex();

		// var info = uni.getStorageSync('infoo');
		// if (info.mobile) {
		// 	this.show1 = false;
		// } else {
		// 	this.show1 = true;
		// }
	},
	methods: {
		/* 	async getMobileNum(e) {
			const [err, res] = await uni.login().catch(err => err);
			if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！');
			const obj = {
				session_key: uni.getStorageSync('session_key'),
				encrypted_data: e.detail.encryptedData,
				iv: e.detail.iv,
				code: res.code,
			};
			const ress = await this.$u.get('api/user/user/bindingphone', obj);
			uni.$showMsg(ress.msg);
			this.show1 = false;
			uni.setStorageSync('phone', ress.data);
			console.log('ress --------------------------- : >> ', ress);
		}, */

		async preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		dialNum() {
			uni.makePhoneCall({
				phoneNumber: this.dd,
			});
		},
		async ctctCustServ() {
			let res;
			try {
				res = await this.$request.post('/api/user/user/getagentphone');

				this.dd = res.data.data;
				this.showMobileNum = true;
			} catch (e) {
				//TODO handle the exception

				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			//如果获取成功，就填充数据
		},
		async getMobileNum(e) {
			const [err, res] = await uni.login().catch(err => err);
			if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！');
			const obj = {
				session_key: uni.getStorageSync('session_key'),
				encrypted_data: e.detail.encryptedData,
				iv: e.detail.iv,
				code: res.code,
			};
			let ress;
			try {
				(ress = await this.$request.post('api/wxapp/Public/decryption', {
					data: obj,
					header: {
						'XX-Wxapp-AppId': helper.appid,
					},
					dataType: 'json',
					responseType: 'text',
				})),
					//如果获取成功，就填充数据

					uni.showToast({
						title: '绑定手机号码成功！',
						icon: 'none',
					});
				this.show1 = false;

				// 重新调用个人信息接口
				this.getUserInfo();
			} catch (e) {
				//TODO handle the exception
				console.log(e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		},

		// 跳转方法
		gotoPage(pagePath) {
			console.log('pagePath :>> ', pagePath);
			this.$Router.push({
				name: pagePath,
			});
		},
		jump() {
			this.$Router.push({
				name: 'account',
			});
		},
		//获取用户信息
		async getUserInfo() {
			let res;
			try {
				res = await this.$request.post('/api/User/userinfo', {
					data: {
						uid: uni.getStorageSync('id'),
					},
				});
				uni.setStorageSync('infoo', res.data.data);
				console.log('res --------------------------- : >> ', res);
			} catch (e) {
				//TODO handle the exception
				console.log('=====', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			//如果获取成功，就填充数据
			if (res.data.code == 1) this.userInfo = res.data.data;

			console.log(this.userInfo);
		},
		//获取个人中心用户信息
		async userIndex() {
			let res;
			try {
				res = await this.$request.post('api/User/user_index', {
					data: {
						uid: uni.getStorageSync('id'),
					},
				});
				//如果获取成功，就填充数据
				if (res.data.code == 1) this.userindex = res.data.data;
				console.log(this.userindex);
			} catch (e) {
				//TODO handle the exception
				console.log(e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
/deep/.ddd {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cu-btn {
	height: 70rpx;
	font-size: 30rpx;
	width: 690rpx;
	margin: 0 auto !important;
	color: #ffffff;
	background-color: #3187fb;
}
.btnsave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40rpx;
	opacity: 0;
	// background-color: red;
}
button::after {
	border: none;
}
</style>
